<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>用户管理</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="main-container">
    <div>
        <div>
            <div>
                <div id="layout">
                    <div id="hint-text">
                        <p>人脸识别登录</p>
                        <p>
                            <button onclick="openMedia()">开启摄像头</button>
                            <button onclick="closeMedia()">关闭摄像头</button>
                        </p>
                    </div>
                    <div id="btns" style="display: none;">

                    </div>
                    <div id="_layout">
                        <div class="collection">
                            <p class="switch-text">切换至<a href="create.html" target="_blank">短信验证码</a>登录</p>
                            <img id="imgTag">
                            <div>
                                <p><font>打开摄像头</font>进行人脸识别登录</p>
                                <button onclick="takePhoto()">登录</button>
                            </div>
                        </div>
                        <div class="camera">
                            <div class="camera-info">
                                <div class="style">
                                    <p>
                                        <span></span>
                                        <span></span>
                                    </p>
                                    <p>
                                        <span></span>
                                        <span></span>
                                    </p>
                                    <div class="camera-hint">请开启摄像头</div>
                                </div>
                                <video id="video" width="500px" height="500px" autoplay="autoplay">
                                    <!-- <source src="https://www.bilibili.com/video/BV1T3411Y7kv?t=0" type="video/mp4"></source> -->
                                </video>
                                <canvas id="canvas" width="500px" height="500px"></canvas>
                            </div>
                        </div>
                    </div>

                    <script>
                        (() => {
                            document.querySelector('#imgTag').setAttribute('src', 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F60%2F71%2F355748a0c730a5d.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645619303&t=75562c550cebdd36e250c3f792445e01');
                        })();

                        let mediaStreamTrack = null; // 视频对象(全局)
                        let video;

                        // 开启摄像头
                        function openMedia() {
                            document.querySelector('.camera-hint').style.display = 'none'; 	// 设置样式的
                            let constraints = {
                                video: {width: 500, height: 500},
                                audio: false
                            };
                            //获得video摄像头
                            video = document.getElementById('video');
                            let promise = navigator.mediaDevices.getUserMedia(constraints);	// 唤起摄像头
                            promise.then((mediaStream) => {
                                mediaStreamTrack = mediaStream.getVideoTracks();
                                video.srcObject = mediaStream;
                                video.play();
                            });
                        }

                        // 拍照
                        function takePhoto() {
                            //获得Canvas对象
                            let video = document.getElementById('video');
                            let canvas = document.getElementById('canvas');
                            let ctx = canvas.getContext('2d');
                            ctx.drawImage(video, 0, 0, 600, 600);
                            // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
                            let img = document.getElementById('canvas').toDataURL();
                            base64 = img.split(",")[1]
                            $.ajax({
                                url: "/face/facelogin",
                                type: "post",
                                data: {base64: base64},
                                success: function (res) {
                                    console.log(res)
                                    if (res.status) {
                                        window.location.href = "userinfo.html?token=" + res.data
                                    }
                                }
                            })
                            // 这里的img就是得到的图片
                            //console.log('img-----', img);
                            document.getElementById('imgTag').src = img;
                        }

                        // 关闭摄像头
                        function closeMedia() {
                            document.querySelector('.camera-hint').style.display = 'block';	// 设置样式的
                            let stream = document.getElementById('video').srcObject;
                            let tracks = stream.getTracks();
                            tracks.forEach(function (track) {
                                track.stop();
                            });
                            document.getElementById('video').srcObject = null;
                        }
                    </script>
                    <script>

                    </script>
                </div>

            </div>
        </div>
    </div>
</div>


<!-- ==========样式表========== -->
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        box-sizing: border-box;
        vertical-align: top;
    }

    html, body {
        width: 100%;
        height: 100%;
        background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191109%2F238a046ac5c89067cf8f41d883120136_00001.jpg&refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645617836&t=5cc9f85d74734ffec824647007b4a2ca');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #main-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #layout {
        width: 1200px;
        height: 650px;
        padding: 0 10px;
        background-color: rgba(0, 255, 255, 0.3);
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    #hint-text {
        height: 12%;
        width: 100%;
        color: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #hint-text p {
        margin: 0 5px;
        width: 50%;
        text-align: center;
        padding: 10px 0;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
    }

    #hint-text p:first-child {
        background-color: rgba(255, 255, 255, 0.5);
    }

    #hint-text p button {
        border: 0;
        padding: 5px 15px;
        border-radius: 2px;
        margin: 0 10px;
        cursor: pointer;
        font: 18px/100% "楷体";
    }

    #_layout {
        width: 100%;
        height: 85%;
        display: flex;
    }

    .collection {
        width: 50%;
        height: 100%;
        color: #FFF;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .collection .switch-text {
        padding: 5px 30px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 5px;
    }

    .collection .switch-text a {
        color: rgb(0, 175, 227);
        padding: 0 5px;
    }

    #imgTag {
        transform: translate(0, 50px);
        width: 170px;
        height: 200px;
    }

    .collection div {
        display: flex;
        width: 250px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .collection div p {
        padding: 10px 0;
        width: 100%;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 5px;
    }

    .collection div p font {
        font-weight: bold;
        padding: 0 5px;
    }

    .collection div button {
        border: 0;
        padding: 10px 50px;
        cursor: pointer;
        font: 18px/100% "楷体";
        transform: translate(0, 20px);
        border-radius: 5px;
    }

    .camera {
        width: 50%;
        height: 100%;
    }

    .camera-info {
        background-color: rgba(255, 255, 255, 0.2);
        margin: 0 auto;
        width: 550px;
        height: 550px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .camera .style {
        position: absolute;
        width: 500px;
        height: 500px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .camera .style p {
        width: 30%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .camera .style p span {
        border: 5px solid #FFF;
        width: 100%;
        height: 30%;
    }

    .camera .style p:nth-child(1) span:nth-child(1) {
        border-right: 0;
        border-bottom: 0;
    }

    .camera .style p:nth-child(1) span:nth-child(2) {
        border-right: 0;
        border-top: 0;
    }

    .camera .style p:nth-child(2) span:nth-child(1) {
        border-left: 0;
        border-bottom: 0;
    }

    .camera .style p:nth-child(2) span:nth-child(2) {
        border-left: 0;
        border-top: 0;
    }

    .camera .style div {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(255, 255, 255, 0.3);
        padding: 10px 50px;
        color: #FFF;
        font: 21px/100% "楷体";
        pointer-events: none;
        user-select: none;
    }

    #video {
        background-color: rgba(0, 0, 0, 0.5);
    }

    #canvas {
        border: 1px solid;
        display: none;
    }
</style>
</body>
</html>
